<template>
    <div class="contion">
        <div class="goods">
            <div class="goods_1">
                <div class="goods_2" @click="search">
                    <el-icon :size="18" style="margin-left:20px;margin-top:10px;color:darkgray"><Search /></el-icon>
                    <span style="color:darkgray;margin-left:20px">薯片</span>
                </div>
                <el-icon :size="20" style="margin-left:20px;margin-top:10px;"><More /></el-icon>
            </div>
            <div class="goods_3">
                <div class="goods_4">
                    <el-icon :size="30" class="icon" @click="deta"><Tickets /></el-icon>
                    <span @click="deta">我的订单</span>
                </div>
                <div class="goods_4">
                    <el-icon :size="30" class="icon" @click="addcart"><ShoppingCart /></el-icon>
                    <span style="margin-left:10px;" @click="addcart">购物车</span>
                </div>
                <div class="goods_4">
                    <el-icon :size="30" class="icon"><Postcard /></el-icon>
                    <span style="margin-left:10px;">卡券包</span>
                </div>
                <div class="goods_4">
                    <el-icon :size="30" class="icon"><Discount /></el-icon>
                    <span>关注店铺</span>
                </div>
                <div class="goods_4">
                    <el-icon :size="30" class="icon"><Collection /></el-icon>
                    <span style="margin-left:10px;">心愿单</span>
                </div>
            </div>
        </div>
        <div class="goodslist">
            <div v-for="(j,k) in goodslist" :key="k">
                <router-link v-bind:to="'/deta/?id='+j.id">
                    <img :src="j.image" style="width:200px; height:250px;">
                </router-link>
                <div class="goodlist_1">
                    <div class="goodlist_2">
                        <span>{{ j.name }}</span>
                        <span>￥{{ j.price }}</span>
                    </div>
                    <van-icon name="shopping-cart-o" size="25" style="margin-left:60px;margin-top:10px" @click="cart(j.id)"/>
                </div>
            </div>
            <div style="margin-top:30px;">1111</div>
        </div>
        <div class="home">
            <span style="margin-left:20px;margin-right:20px" @click="home">首页</span>
            <span style="font-size:20px;color:#000;margin-left:40px;margin-right:20px" @click="goods"><b>购物</b></span>
            <el-button><el-icon :size="30" @click="add"><Plus color="#fff"/></el-icon></el-button>
            <span style="margin-left:40px;margin-right:20px" @click="message">消息</span>
            <span style="margin-left:40px;margin-right:20px" @click="my">我</span>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();


const search = () => {
    router.push('/search')
}
const home = () =>{
    router.push('/')
}
const add = () => {
    router.push('/add')
}
const message = () => {
    router.push('/message')
}
const my = () => {
    router.push('/my')
}
const addcart = () => {
    router.push('/addcart')
}

const deta = () => {
    router.push('/orderdeta')
}

let goodslist = ref([]);

const getgoods = () => {
    http.get('/goods/').then(res => {
        goodslist.value = res.data;
    })
}

const userid = localStorage.getItem('userid')

// 添加商品到购物车的方法
const cart = (goodId) => {
  if (!userid) {
    ElMessage.error('用户未登录，无法添加到购物车');
    return;
  }
  http.post("/cart/", {
    user: userid,
    goods: goodId
  })
  .then(response => {
      // 处理添加成功的逻辑，比如提示用户添加成功
      console.log(response.data);
      if(response.status === 201)
      ElMessage.success(response.data.msg);
    })
  .catch(error => {
      // 处理添加失败的逻辑，比如提示用户添加失败
      console.error(error);
      ElMessage.error(response.data.msg);
    });
};

onMounted(() => {
    getgoods();
});

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.goods_1{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}

.goods_2{
    margin-left: 20px;
    width: 80%;
    height: 40px;
    background-color: #f8f8f8;
    border-radius: 20px;
}

.goods_3{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 40px;
    margin-bottom: 10px;
}

.goods_4{
    display: flex;
    flex-direction: column;
    width: 70px;
}

.icon{
    margin-left:20px;
    margin-right:40px;
    margin-bottom: 10px;
}

.goodslist{
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
    height: 740px; /* 设置固定高度 */
    overflow-y: auto; /* 允许垂直滚动 */
    padding-top: 10px;
    margin-left: 10px;
}

.goodlist_1{
    display: flex;
    flex-direction: row;
}

.goodlist_2{
    display: flex;
    flex-direction: column;
    width: 100px;
}

.home{
    width: 100%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    height: 50px;
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color:#FFFFFF;
    padding-top: 20px;
    font-size: 18px;
    color: darkgray;
}

.home button{
    background-color: #FF2442;
    border-radius: 10px;
    width: 60px;
    height: 40px;
    margin-left:20px;
}
</style>